import './index.scss'
import {Menu } from 'antd'
import {useEffect, useRef, useState} from "react";
import {useStore} from "@/store/index.jsx";
import {autorun} from "mobx";
import { observer } from "mobx-react-lite";

const MyMenu = () => {
    const {listStore} = useStore()
    const [items, setItems] = useState([])
    const [current, setCurrent] = useState('0');
    useEffect(() => {
        autorun(() => {
            if (listStore.mainData.length > 0) {
                let list = listStore.mainData.map((v,i) => {
                    return {
                        key: i+'',
                        label: v.name
                    }
                })
                setItems(list)

            }
        })
    }, [])
    //点击了菜单
    const handleClick = (e) => {
        //菜单索引号
        listStore.setMenuIndex(e.key)
        setCurrent(e.key);

    }
    return (
        <div className={'menu-view'}>
            <Menu  selectedKeys={[current]} onClick={handleClick} mode="vertical" items={items}></Menu>
        </div>
    )
}
export default observer(MyMenu)